<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<script>
			function chekForm() {
				//alert("aa");
				/**校验用户名*/
				//1.获取用户输入的数据
				var uValue = document.getElementById("username").value;
				//alert(uValue);
				if(uValue==""){
					//2.给出错误提示信息
					alert("用户名不能为空!");
					return false;
				}
				
				/*校验密码*/
				var pValue = document.getElementById("password").value;
				if(pValue==""){
					alert("密码不能为空!");
					return false;
				}
				
				/**校验确认密码*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue!=pValue){
					alert("两次密码输入不一致!");
					return false;
				}
				
				/*校验邮箱*/
				var eValue = document.getElementById("email").value;
				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("邮箱格式不正确!");
					return false;
				}

			}
		</script>
	</head>

	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--1.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>

			<!--2.导航栏部分-->
			<tr height="50px">
				<td bgcolor="black">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font size="5" color="white">首页</font>
					</a> &nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">手机数码</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">电脑办公</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">鞋靴箱包</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<form action="#" method="get" name="regForm" onsubmit="return chekForm()">
						<!--嵌套一个十行二列的表格-->
						<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="750px" height="400px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4" color="blue">会员注册</font>&nbsp;&nbsp;&nbsp;&nbsp;USER REGISTER
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="username" id="username" size="34px" placeholder="请输入用户名" required="required" />
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" id="password" size="34px" placeholder="请输入密码" required="required" />
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" id="repassword" size="34px" placeholder="请确认密码" required="required" />
								</td>
							</tr>
							<tr>
								<td>
									Email
								</td>
								<td>
									<input type="email" name="email" id="email" size="34px" placeholder="请输入邮箱" />
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="name" size="34px" placeholder="请输入您的真实姓名" />
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="0" />男
									<input type="radio" name="sex" value="1" />女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="date" name="time" />
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="code" placeholder="请输入验证码" required="required" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<!--4.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--5.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2005-2016 XXXX 版权所有
					</p>
				</td>
			</tr>

		</table>
	</body>

</html>